<template>
  <view class="page-container">
    <!-- 页面标题 -->
    <view class="header">
     <!-- <text class="title">额外规则管理</text> -->
    </view>

    <!-- 新增按钮 -->
    <view class="add-button-wrapper">
      <button class="mini-btn" @click="navigateToForm()">新增规则</button>
    </view>

    <!-- 规则列表 -->
    <scroll-view scroll-y class="rule-list">
      <view v-for="(rule, index) in rules" :key="index" class="rule-card">
        <!-- 卡片内容 -->
        <view class="rule-info">
          <text class="rule-name">{{ getTemplateName(rule.templateId) }}</text>
          <text class="rule-desc">{{ rule.description }}</text>
          <text class="rule-status" :class="{ active: rule.status === 1 }">
            {{ rule.status === 1 ? '启用' : '禁用' }}
          </text>
        </view>

        <!-- 操作按钮 -->
        <view class="rule-actions">
          <button size="mini" type="primary" plain @click="editRule(rule)">编辑</button>
          <button style="margin-left: auto;" size="mini" type="default" plain @click="deleteRule(rule.id)">删除</button>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rules: [],
      templates: []
    };
  },
  onLoad() {
    this.fetchTemplates();
    this.fetchRules();
  },
  onShow() {
    this.fetchTemplates();
    this.fetchRules();
  },
  methods: {
    async fetchTemplates() {
      try {
        const response = await uni.request({
          url: 'http://localhost:8083/template',
          method: 'GET'
        });
        this.templates = response.data;
      } catch (error) {
        console.error('没连上后台你个笨蛋', error);
      }
    },
    async fetchRules() {
      try {
        const response = await uni.request({
          url: 'http://localhost:8083/rules',
          method: 'GET'
        });
        this.rules = response.data.map(rule => ({ ...rule, editable: false }));
      } catch (error) {
        console.error('没连上后台你个笨蛋', error);
      }
    },
    editRule(rule) {
      uni.navigateTo({
        url: `/pages/index/ExtraRulesForm?id=${rule.id}`
      });
    },
    async deleteRule(id) {
      if (!id) return;

      uni.showModal({
        title: '提示',
        content: '确定要删除该规则吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              await uni.request({
                url: `http://localhost:8083/rules/${id}`,
                method: 'DELETE'
              });

              uni.showToast({
                title: '删除成功',
                icon: 'success',
                duration: 2000
              });

              this.fetchRules(); // 刷新规则列表
            } catch (error) {
              uni.showToast({
                title: '删除失败',
                icon: 'none',
                duration: 2000
              });
              console.error('删除规则失败', error);
            }
          }
        }
      });
    },
    navigateToForm() {
      uni.navigateTo({
        url: '/pages/intelligent/ExtraRulesForm'
      });
    },
    getTemplateName(templateId) {
      const template = this.templates.find(item => item.templateId === templateId);
      return template ? template.templateName : '未知模板';
    }
  }
};
</script>

<style scoped>
/* 页面容器 */
.page-container {
  background-color: #f9f9f9;
  padding: 20rpx 30rpx;
  min-height: 100vh;
}

/* 标题栏 */
.header {
  margin-bottom: 30rpx;
}
.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

/* 新增按钮区域 */
.add-button-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30rpx;
}

.mini-btn {
  font-size: 26rpx;
  padding: 0 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 8rpx;
  background-color: #07c160;
  color: white;
}

/* 规则列表滚动区域 */
.rule-list {
  height: calc(100vh - 220rpx);
}

/* 规则卡片 */
.rule-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 25rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
}

/* 规则信息 */
.rule-info {
  margin-bottom: 20rpx;
}
.rule-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}
.rule-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
  display: block;
}
.rule-status {
  font-size: 24rpx;
  color: #999;
  padding: 4rpx 16rpx;
  border-radius: 4rpx;
  display: inline-block;
}
.rule-status.active {
  background-color: #e6f7ee;
  color: #07c160;
}

/* 操作按钮 */
.rule-actions {
  display: flex;
  justify-content: flex-end;
}
.rule-actions button {
  margin-left: 0rpx;
  font-size: 24rpx;
  padding: 0 24rpx;
  height: 56rpx;
  line-height: 56rpx;
}
</style>